<%@ page isELIgnored="false" %>
<%--
  Created by IntelliJ IDEA.
  User: zj
  Date: 2020/3/29
  Time: 22:10
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String CONTEXT = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/jsp/jquery.js"></script>
</head>
<body>
<table class="table">

</table>
<div class="add">新增</div>
<script>

    $(".add").click(function(){
        var str = "";
        str += "<tr>";
        str += "<td></td>";
        str += "<td><input name='name'></td>";
        str += "<td><input name='address'></td>";
        str += "<td><input name='phone'></td>";
        str += "<td class='edit'><a href='javascript:void(0);'>保存</td>";
        str += "<td class='del'><a href='javascript:void(0);'>删除</td>";
        str += "</tr>";
        $(".table").append(str);
    })

    $(function(){
        list();
    })

    function list(){
        $.ajax({
            url:"${pageContext.request.contextPath}/resume/list",
            data:'{}',
            type:'post',
            contentType: "application/json; charset=utf-8",
            dataType:'json',
            success:function(data) {
                $(".table").empty().append("<tr>\n" +
                    "        <th>id</th>\n" +
                    "        <th>姓名</th>\n" +
                    "        <th>地址</th>\n" +
                    "        <th>手机</th>\n" +
                    "    </tr>");
                $.each(data,function(i,val){
                    var str = "<tr>";
                    str += "<td>" + val.id + "</td>";
                    str += "<td><input name='name' disabled value=" + val.name + "></td>";
                    str += "<td><input name='address' disabled value=" + val.address + "></td>";
                    str += "<td><input name='phone' disabled value=" + val.phone + "></td>";
                    str += "<td class='edit'><a href='javascript:void(0);'>编辑</a></td>";
                    str += "<td class='del'><a href='javascript:void(0);'>删除</a></td>";
                    str += "</tr>";
                    $(".table").append(str);
                })
            }
        })
    }

    $(".table").on("click",".edit",function(){

        if($(this).find("a").html() == "保存"){
            var id = $(this).parent("tr").find("td").eq(0).html();
            var name = $(this).parent("tr").find("td").eq(1).find("input").val();
            var address = $(this).parent("tr").find("td").eq(2).find("input").val();
            var phone = $(this).parent("tr").find("td").eq(3).find("input").val();
            $.ajax({
                url:"${pageContext.request.contextPath}/resume/edit",
                data:JSON.stringify({id:id,name:name,address:address,phone:phone}),
                type:'post',
                contentType: "application/json; charset=utf-8",
                dataType:'json',
                success:function(data) {
                    if(data.status == 200){
                        alert("修改成功");
                    }else{
                        alert("修改失败");
                    }
                }
            })
        }else{
            $(this).parent("tr").find("input").attr("disabled",false);
            $(this).find("a").html("保存");
        }


    })

    $(".table").on("click",".del",function(){
        var id = $(this).parent("tr").find("td").eq(0).html();
        $.ajax({
            url:"${pageContext.request.contextPath}/resume/del",
            data:JSON.stringify({"id":id}),
            type:'post',
            contentType: "application/json; charset=utf-8",
            dataType:'json',
            success:function(data) {
                if(data.status == 200){
                    alert("删除成功");
                    list();
                }else{
                    alert("删除失败");
                }
            }
        })

    })

</script>
</body>
</html>
